<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			list-style-type:none; 
		}
		#box{
			width: 960px;
			margin:0 auto;
		}
		#box ul{
			float: left;
			width: 300px;
			margin: 0 10px;
		}
		#box ul li img{
			width: 300px;
		}
	</style>
	<script>
		//获取最小ul的索引
		function checkHeight(oUl){
			//初始化
			var height=10000000;
			var index=0;
			for(var i=0;i<oUl.length;i++){
				var now_height=oUl[i].offsetHeight;
				if (now_height<height) {
					height=now_height;
					index=i;
				}	
			}
			return index;//返回索引
		}

		window.onload=function(){
			var oBox=document.getElementById("box");
			var oUl=oBox.getElementsByTagName("ul");
			//浏览器高度
			var vH=document.documentElement.clientHeight;


			//滚动事件
			window.onscroll=function(){
				//滚动条高度
				var sT=document.documentElement.scrollTop || document.body.scrollTop;
				//滚动条的高度+浏览器的高度=内容区域的高度
				//sT+vH=document.body.scrollHeight;
				if (sT+vH>document.body.scrollHeight*0.8) {
					//alert('到底了');
					//加载内容
					createElement();
				}

			}

			createElement();
			function createElement(){
				for (var i = 1; i <=18; i++){
					var oImg=document.createElement("img");
					oImg.src="images/"+ i +".jpg";
					var oLi=document.createElement("li");
					oLi.appendChild(oImg);
					//获取最小ul的索引
					var min_height=checkHeight(oUl);
					oUl[min_height].appendChild(oLi);
				}
			}
			

		}
	</script>
</head>
<body>
	<div id="box">
		<ul></ul>
		<ul></ul>
		<ul></ul>
	</div>
</body>
</html>